<template>
  <div>
    <el-row>
      <el-col>
        <HomeCard desc="Pending transaction" title="用户活跃量">
          <ActivePlate :infoList="infoCardData" />
        </HomeCard>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :lg="6" :md="24">
        <HomeCard desc="User from" title="用户来源">
          <ChartPie :value="pieData" />
        </HomeCard>
      </el-col>
      <el-col :lg="18" :md="24">
        <HomeCard desc="User active" title="每周用户活跃量">
          <ChartLine :value="lineData" />
        </HomeCard>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :lg="18" :md="24">
        <HomeCard desc="User from" title="柱状图">
          <ChartBar :value="lineData" />
        </HomeCard>
      </el-col>
      <el-col :lg="6" :md="24">
        <HomeCard desc="complete" title="完成率">
          <ChartGauge />
        </HomeCard>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ActivePlate from '@/components/active-plate/ActivePlate.vue'
import HomeCard from './components/Card.vue'
import ChartPie from './components/ChartPie.vue'
import ChartLine from './components/ChartLine.vue'
import ChartGauge from './components/ChartGauge.vue'
import ChartBar from './components/ChartBar.vue'
import ChartFunnel from './components/ChartFunnel.vue'

export default {
  name: 'Home',
  components: {
    HomeCard,
    ActivePlate,
    ChartPie,
    ChartFunnel,
    ChartLine,
    ChartGauge,
    ChartBar
  },
  props: {},
  data() {
    return {
      infoCardData: [
        {
          title: '新增用户',
          icon: 'md-person-add',
          count: 803,
          color: '#11A0F8'
        },
        { title: '累计点击', icon: 'md-locate', count: 232, color: '#FFBB44 ' },
        {
          title: '新增问答',
          icon: 'md-help-circle',
          count: 142,
          color: '#7ACE4C'
        },
        { title: '分享统计', icon: 'md-share', count: 657, color: '#11A0F8' },
        {
          title: '新增互动',
          icon: 'md-chatbubbles',
          count: 12,
          color: '#91AFC8'
        },
        { title: '新增页面', icon: 'md-map', count: 14, color: '#91AFC8' }
      ],
      pieData: [
        { value: 335, name: '直接访问', color: '#3AA1FF' },
        { value: 310, name: '邮件营销', color: '#36CBCB' },
        { value: 234, name: '联盟广告', color: '#4ECB73' },
        { value: 135, name: '视频广告', color: '#F47F92' },
        { value: 1548, name: '搜索引擎', color: '#FBD437' }
      ],
      lineData: {
        Mon: 13253,
        Tue: 34235,
        Wed: 26321,
        Thu: 12340,
        Fri: 24643,
        Sat: 1322,
        Sun: 1324
      }
    }
  },
  methods: {},
  mounted() {}
}
</script>

<style lang="less">
.count-style {
  font-size: 50px;
}
</style>